<template>
  <div class="lab-detail-wrapper">
    <div class="lab-detail-header">
      <div class="header-info">
        <img class="info-img" src="@/assets/images/detail-title-icon.png" />
        <div class="info-content">
          <div class="title">{{ datas?.name }}</div>
          <div class="desc">
            {{ datas?.teacher_name }}·发布于{{ datas?.publish_date }}
          </div>
        </div>
      </div>
      <div class="header-btns">
        <div class="btn-download" @click="handleDown">
          <img class="icon" src="@/assets/icon-download.png" />
          <span>下载报告</span>
        </div>
        <!-- <div class="btn-ai">
          <img class="icon" src="@/assets/icon-ai-white.png" />
          <span>AI助手</span>
        </div> -->
      </div>
    </div>
    <div class="lab-detail-body">
      <div class="lab-sider">
        <div class="sider-title">
          <div class="title-text">目录</div>
          <img class="arrow-icon" src="@/assets/icon-arrow-left.png" />
        </div>
        <div class="sider-content">
          <div
            class="sider-item"
            :class="{ cur: index == curIndex }"
            v-for="(item, index) in siderList"
            :key="index"
            @click="handleTo(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="lab-main"  ref="mainContainer">
        <div class="main-title">实验内容</div>
        <div class="main-content" ref="contentContainer">
          <div class="content-column" id="section0" ref="contentBlock0">
            <div class="column-title">实验目标</div>
            <div class="column-content">
              <div v-html="datas?.objective"></div>
            </div>
          </div>
          <div class="content-column" id="section1" ref="contentBlock1">
            <div class="column-title">实验仪器</div>
            <div class="column-content">
              <div v-html="datas?.instrument_equipment"></div>
            </div>
          </div>
          <div class="content-column" id="section2" ref="contentBlock2">
            <div class="column-title">实验原理</div>
            <div class="column-content line">
              <div v-html="datas?.principle"></div>
            </div>
          </div>
          <div class="content-column" id="section3" ref="contentBlock3">
            <div class="column-title">作业要求</div>
            <div class="column-content line">
              <div v-html="datas?.description"></div>
            </div>
          </div>
          <div class="content-column" id="section4" ref="contentBlock4">
            <div class="column-title">教师评分</div>
            <div class="column-content line">
              <div class="content-text">
                得分：{{
                  datas?.homework_report_for_current_student?.report_score
                    ?.finnal_score
                }}
              </div>
              <div class="content-text">
                评语：
                {{
                  datas?.homework_report_for_current_student?.report_score
                    ?.brief
                }}
              </div>
            </div>
          </div>
          <div class="content-column" id="section5" ref="contentBlock5">
            <div class="column-title">我的作业</div>
            <div class="column-content">
              <div class="report-column">
                <div class="report-title">
                  <div class="title-text">实验目的</div>
                </div>
                <div class="report-content">
                  <div v-html="reportData?.objective"></div>
                </div>
              </div>
              <div class="report-column">
                <div class="report-title">
                  <div class="title-text">实验仪器和器材</div>
                </div>
                <div class="report-content">
                  <div v-html="reportData?.instrument_equipment"></div>
                </div>
              </div>
              <div class="report-column">
                <div class="report-title">
                  <div class="title-text">实验原理</div>
                </div>
                <div class="report-content">
                  <div v-html="reportData?.principle"></div>
                </div>
              </div>
              <div class="report-column">
                <div class="report-title">
                  <div class="title-text">实验步骤</div>
                </div>
                <div class="report-content">
                  <div v-html="reportData?.steps"></div>
                </div>
              </div>
              <div class="report-column">
                <div class="report-title">
                  <div class="title-text">数据记录</div>
                </div>
                <div class="report-content">
                  <div v-html="reportData?.data_records"></div>
                </div>
              </div>
              <div class="report-column">
                <div class="report-title">
                  <div class="title-text">实验结果</div>
                </div>
                <div class="report-content">
                  <div v-html="reportData?.result"></div>
                </div>
              </div>
              <div class="report-column">
                <div class="report-title">
                  <div class="title-text">误差分析</div>
                </div>
                <div class="report-content">
                  <div v-html="reportData?.error_analysis"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <report-down v-model:value="isOpen" :id="key"></report-down>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import { useRoute } from "vue-router";
import API from "@/api/user";
import reportDown from "@/components/report-down/index.vue";
const route = useRoute();
const query = computed(() => route.query);
const curIndex = ref(0);
const siderList = ref([
  {
    name: "实验目标",
  },
  {
    name: "实验仪器",
  },
  {
    name: "实验原理",
  },
  {
    name: "作业要求",
  },
  {
    name: "教师评分",
  },
  {
    name: "我的作业",
  },
]);
// 添加内容区块的ref数组
// 添加滚动容器引用
const mainContainer = ref(null);
const contentContainer = ref(null);
const contentBlocks = ref([]);
const handleTo = (index) => {
  curIndex.value = index;
  
  nextTick(() => {
    if (contentBlocks.value[index]) {
      // 计算偏移量（考虑可能的固定头部）
      const headerHeight = 60; // 头部高度，根据实际情况调整
      const targetElement = contentBlocks.value[index];
      const container = mainContainer.value;
      
      // 计算目标位置
      const targetRect = targetElement.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();
      
      // 计算滚动位置
      const scrollPosition = targetRect.top - containerRect.top + container.scrollTop - headerHeight;
      
      // 平滑滚动
      container.scrollTo({
        top: scrollPosition,
        behavior: "smooth"
      });
    }
  });
};
const datas = ref();
const reportData = ref();
const key = ref();
const getData = async () => {
  let params = {
    homework_id: query.value.id,
  };
  const res = await API.HomeworkFetchModel(params);
  datas.value = res;
  reportData.value = res?.homework_report_for_current_student;
  key.value = res?.homework_report_for_current_student.student_experiment_id;
};
const isOpen = ref(false);
const handleDown = () => {
  isOpen.value = true;
};
onMounted(async () => {
  contentBlocks.value = [
    document.getElementById('section0'),
    document.getElementById('section1'),
    document.getElementById('section2'),
    document.getElementById('section3'),
    document.getElementById('section4'),
    document.getElementById('section5')
  ];
  await getData();
  
});
</script>
<style scoped lang="less">
.lab-detail-wrapper {
  background: #fff;
  padding: 0 16px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .lab-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    .header-info {
      display: flex;
      align-items: center;
      .info-img {
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }
      .info-content {
        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #333333;
          line-height: 30px;
          text-align: left;
          font-style: normal;
          margin-bottom: 2px;
        }
        .desc {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .header-btns {
      display: flex;
      align-items: center;
      .btn-download {
        width: 108px;
        cursor: pointer;
        margin-right: 16px;
        height: 32px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e6ebf1;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        span {
          width: 56px;
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
      .btn-ai {
        width: 108px;
        height: 32px;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        background: linear-gradient(270deg, #c671f3 0%, #1447ff 100%);
        border-radius: 4px;
        .icon {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        span {
          width: 56px;
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #fff;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
  .lab-detail-body {
    display: flex;
    flex: 1;
    height: calc(100% - 92px);
    background: #f8f8f8;
    padding: 16px;
    .lab-sider {
      width: 160px;
      margin-right: 12px;
      height: 100%;
      overflow-y: auto;
      .sider-title {
        width: 160px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e6ebf1;
        .title-text {
          width: 28px;
          height: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #8c8c8c;
          line-height: 16px;
          text-align: left;
          font-style: normal;
        }
        .arrow-icon {
          width: 16px;
          height: 16px;
        }
      }
      .sider-content {
        padding: 8px 0;
        .sider-item {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          cursor: pointer;
          color: #262626;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          padding: 8px 0;
          &.cur {
            color: #2776ff;
          }
        }
      }
    }
    .lab-main {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      padding: 20px 30px;
      display: flex;
      flex-direction: column;
      background: #fff;
      .main-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        line-height: 30px;
        text-align: center;
        font-style: normal;
      }
      .main-content {
        flex: 1;
        .content-column {
          padding: 15px 0;
          animation: highlight 1.5s ease;
          @keyframes highlight {
            0% {
              background-color: rgba(39, 118, 255, 0.1);
            }
            100% {
              background-color: transparent;
            }
          }
          .column-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #333333;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            margin-bottom: 12px;
          }
          .column-content {
            padding-left: 16px;
            padding-bottom: 16px;
            &.line {
              border-bottom: 1px solid #e6ebf1;
            }
          }
        }
      }
    }
  }
}
</style>
